<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-State&生命周期</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date(), counter: 1};
        }

        //声明周期：挂载
        componentDidMount() {
            //timerID会保存state中
            this.timerID = setInterval(() => {
                //1、调用方法修改date、counter的值
                //this.tick();
                //2、调用setState()修改date、counter的值
                this.setState({
                    date: new Date(),
                    counter: this.state.counter + this.props.increment
                });
            }, 1000);
        }

        //声明周期：卸载
        componentWillUnmount() {
            clearInterval(this.timerID);
        }

        tick() {
            //1、this.state.date=new Date()这种写方法能改变this.state.date的值，但视图不会更新
            //2、this.setState既能改变this.state.date的值，视图也会更新
            //3、当this.state中有多个键值对时，仅修改date的值，state中的值变化时组件会重新渲染
            //4、state的更新可能是异步的，不要依赖他们的值来更新下一个状态
            //5、如何修改props的属性值？？？
            this.setState({
                date: new Date(),
                counter: this.state.counter + this.props.increment
            });

            //解决state异步更新的方法1
            //this.setState((state, props)=>({
            //    date: new Date(),
            //    counter: state.counter + props.increment
            //}));

            //解决state异步更新的方法2
            //this.setState(function(state, props){
            //    return {
            //        date: new Date(),
            //        counter: state.counter + props.increment
            //    };
            //});
        }

        render() {
            return (
                <div>
                    <h1>Hello World</h1>
                    <h2>It is {this.state.date.toLocaleTimeString()}-{this.state.counter}</h2>
                </div>
            );
        }
    }

    //当Clock组件第一次被渲染到DOM中的时候，被称为挂载，同时添加计时器
    //当Clock组件在DOM中被删除的时候，被称为挂载，同时清除计时器
    ReactDOM.render(
        <Clock increment="1" />,
        document.getElementById("app")
    );
</script>
</html>